<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width = device-width,initial-scale = 1.0,maximum-scale = 1.0,user-scalable = 0" />
  <title>5kg协作机器人模型展示作业-高齐-18668955015</title>
  <link rel="stylesheet" type="text/css" href="css/css.css" />
  <script src="./js/es6-promise.auto.min.js"></script>
  
  <script src="./js/bundle.js"></script>

</head>


<body>
  <header>5kg协作机器人模型展示</header>
  <div id="siasun">
    <div id="menu">
      <button  id="playani" >动画播放</button>
      <button  id="showaxis">坐标系</button>
      <button  id="explor">爆炸效果</button>
    </div>
  </div>
  <div id="note">
    <div id="close">关闭帮助</div>
   <p style="color: white;">使用说明</p>
   <p>鼠标操作说明：鼠标左键按下拖动旋转视角；鼠标滚轮缩放视角；鼠标左键点击关节，显示关节属性信息；鼠标左键点击空白处，隐藏关节属性信息显示；<br /><br />
    动画播放按钮说明：点击按钮，循环播放关节放下抬起动画，再次点击按钮停止播放动画，恢复正常效果；动画播放过程中无法拖拽关节；<br />
    坐标系按钮的说明：点击按钮，显示各个关节坐标系，再次点击按钮隐藏坐标系显示，鼠标拖拽坐标轴可以移动单个关节，鼠标松开恢复到初始位置；动画播放模式下支持显示关节，不支持拖拽；<br />
    爆炸效果按钮说明：点击按钮，模型机械部分变为红色且呈爆炸图显示，再次点击按钮恢复正常效果；
  </p>
  </div>
  <div id="showhelp">显示帮助</div>
  <footer>制作：高齐 ，模型版权：山东新松工业软件研究院</footer>

  <script>
  

    window.addEventListener("load", function () {
      
      _XS_.init3D("siasun");
      if(navigator.userAgent.toLowerCase().indexOf('trident')>-1){
        _XS_.loadmodel("models/main2.gltf");
      }else{
        _XS_.loadmodel("models/main.glb");
      }

      _XS_.bindPlayAni(document.getElementById("playani"));
      _XS_.bindShowAxis(document.getElementById("showaxis"));
      _XS_.bindExplor(document.getElementById("explor"));

    })
    document.getElementById("close").onclick=function(){
      document.getElementById("note").style.display="none"
      document.getElementById("showhelp").style.display="block"
    }
    document.getElementById("showhelp").onclick=function(){
      document.getElementById("note").style.display="block"
      document.getElementById("showhelp").style.display="none"
    }

  </script>
</body>

</html>